<script setup>
import {ref, onMounted, reactive} from 'vue'
  import { useRouter } from "vue-router";
  import informationCard from '../components/information-card.vue';
  import icon1 from '../components/icons/ExpertScore/icon1.svg';
  import back1 from '../components/icons/ExpertScore/back1.svg';
  import icon2 from '../components/icons/ExpertScore/icon2.svg';
  import back2 from '../components/icons/ExpertScore/back2.svg';
  import icon3 from '../components/icons/ExpertScore/icon3.svg';
  import back3 from '../components/icons/ExpertScore/back3.svg';
  import icon4 from '../components/icons/ExpertScore/icon4.svg';
  import back4 from '../components/icons/ExpertScore/back4.svg';
  import redWarningTable from '../components/ExpertScore/red-warning-table.vue';
  import yellowWarningTable from '../components/ExpertScore/yellow-warning-table.vue';
  import monthWarning from '../components/ExpertScore/month-warning.vue';
  import positionWarning from '../components/ExpertScore/position-warning.vue';
  import { getEarlyWarningBuName, getEarlyWarningMonth, getParticipateSection, getParticipateTotal, getRedEarlyWarning, getRedEarlyWarningClue, getYellowEarlyWarning, getYellowEarlyWarningClue} from '../api/expert-score';

  const router = useRouter();
  const renderKey = ref();
  const linkageRenderKey = ref();
  const expertScoring = ref({
    participateTotal: '-',
    participateSection: '-',
    redEarlyWarning: '-',
    yellowEarlyWarning: '-',
  })
  const redWarnData = ref();
  const yellowWarnData = ref();
  const monthWarnData = ref();
  const monthWarningKey = ref();
  const buWarnData = ref();

  const getParticipateTotalData = (params) => {
    getParticipateTotal(params).then(res => {
      if(res.code === 200){
        expertScoring.value.participateTotal = res.data;
      }
    })
  }
  const getParticipateSectionData = (params) => {
    getParticipateSection(params).then(res => {
      if(res.code === 200){
        expertScoring.value.participateSection = res.data;
      }
    })
  }
  const getRedEarlyWarningData = (params) => {
    getRedEarlyWarning(params).then(res => {
      if(res.code === 200){
        expertScoring.value.redEarlyWarning = res.data;
      }
    })
  }
  const getYellowEarlyWarningData = (params) => {
    getYellowEarlyWarning(params).then(res => {
      if(res.code === 200){
        expertScoring.value.yellowEarlyWarning = res.data;
      }
    })
  }
  const getRedEarlyWarningClueData = (params) => {
    getRedEarlyWarningClue(params).then(res => {
      if(res.code === 200 && res.data){
        redWarnData.value = res.data;
      } else {
        redWarnData.value = [];
      }
      renderKey.value = Math.random()
    })
  }
  const getYellowEarlyWarningClueData = (params) => {
    getYellowEarlyWarningClue(params).then(res => {
      if(res.code === 200 && res.data){
        yellowWarnData.value = res.data;
      } else {
        yellowWarnData.value = [];
      }
      renderKey.value = Math.random()
    })
  }
  const getEarlyWarningMonthData = (params) => {
    getEarlyWarningMonth(params).then(res => {
      if(res.code === 200 && res.data){
        monthWarnData.value = res.data;
        monthWarningKey.value = Math.random()
      }
    })
  }
  const getEarlyWarningBuNameData = (params) => {
    getEarlyWarningBuName(params).then(res => {
      if(res.code === 200 && res.data){
        buWarnData.value = res.data;
        linkageRenderKey.value = Math.random()
      }
    })
  }

  const dataInit = async(params) => {
    params.ldap = router.currentRoute.value.query.ldap
    Object.assign(linkageParams, params);
    getParticipateTotalData(params);
    getParticipateSectionData(params);
    getRedEarlyWarningData(params);
    getYellowEarlyWarningData(params);
    getRedEarlyWarningClueData({ ...params });
    getYellowEarlyWarningClueData({ ...params });
    getEarlyWarningMonthData(params);
    getEarlyWarningBuNameData(params);
    linkageStatus.value = false;
    // renderKey.value = Math.random();
  }

const positionWarningRef = ref();
const echartsDataReset = () => {
  positionWarningRef.value.reset();
}
onMounted(async() => {
  // let query = router.currentRoute.value.query;
  // const params = {
  //   buCode: query.buCode || '50',
  //   month: new Date().getMonth() + 1,
  //   ldap: query.ldap,
  //   year: new Date().getFullYear(),
  // }
  // dataInit(params);
  
  // console.log(expertScoring.value)
})
const linkageParams = reactive({
  buName: '',
  buCode: '',
  year: '',
  ldap: '',
})
const linkageParamsChange = (data) => {
  linkageParams.buName = data.name;
  getRedEarlyWarningClueData({...linkageParams, buCode: data.buCode});
  getYellowEarlyWarningClueData({...linkageParams, buCode: data.buCode});
  linkageStatus.value = true;
};
const linkageReset = () => {
    getRedEarlyWarningClueData({...linkageParams, buName: ''});
    getYellowEarlyWarningClueData({...linkageParams, buName: ''});
    linkageStatus.value = false;
}
const linkageStatus = ref(false);
</script>

<template>
 <!-- <div class="report-main">
   <div class="demo">样例数据</div>
 </div> -->
  <div class="largeScreenContainer">
    <huarun-header @getData="dataInit" :showMonth="false" :detailMonth="true" title="招采专家评分看板"/>
    <!-- <div class="demo">样例数据</div> -->
<!--    <div class="ddl-style ddl-text">统计截止日期：2023年12月15日</div>-->
    <div class="column-flex">
      <div :key="renderKey" class="row-flex lineTwo">
          <div class="div-border lineTwo-div">
            <informationCard title="参与技术评分专家" :data="expertScoring.participateTotal" unit="个" :imgUrl="icon1" :backUrl="back1" class="card-style"/>
          </div>
          <div class="div-border lineTwo-div">
            <informationCard title="参与打分标段数" :data="expertScoring.participateSection" unit="个" :imgUrl="icon2" :backUrl="back2" class="card-style"/>
          </div>
          <div class="div-border lineTwo-div">
            <informationCard title="红色预警人数" :data="expertScoring.redEarlyWarning" unit="个" :imgUrl="icon3" :backUrl="back3" class="card-style"/>
          </div>
          <div class="div-border lineTwo-div">
            <informationCard title="黄色预警人数" :data="expertScoring.yellowEarlyWarning" unit="个" :imgUrl="icon4" :backUrl="back4" class="card-style"/>
          </div>
      </div>
      <div class="row-flex lineThree">
        <div class="div-border lineThree-div">
          <monthWarning :key="monthWarningKey" :reportData="monthWarnData"/>
        </div>
        <div class="div-border lineThree-div">
          <positionWarning :key="linkageRenderKey" :linkage-status="linkageStatus" ref="positionWarningRef" @linkage-reset="linkageReset" @linkage-params-change="linkageParamsChange" :reportData="buWarnData"/>
        </div>
      </div>
      <div :key="renderKey" class="row-flex lineThree">
          <div class="div-border lineOne-div">
            <yellowWarningTable :linkage-status="linkageStatus" @data-reset="echartsDataReset" :tablesData="yellowWarnData"/>
          </div>
      </div>
      <div :key="renderKey" class="row-flex lineThree">
        <div class="div-border lineOne-div">
          <redWarningTable :linkage-status="linkageStatus" :tablesData="redWarnData"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.largeScreenContainer {
  position: relative;
  padding-bottom: 40px;
}
@media screen and (width < 1920px) {
  .largeScreenContainer {
    width: 1920px;
    min-height: 1080px;
  }
}
.lineTwo {
  width: 100%;
  .lineTwo-div {
    height: 180px;
    flex-grow: 1;
    width: 437px;
    .card-style {
      width: 100%
    }
  }
}
.lineThree {
  width: 100%;
  .lineThree-div {
    width: 50%;
    height: 341px;
  }
  .lineOne-div {
    width: 100%;
    height: 341px;
  }
}
.ddl-style {
  width: 247px;
  height: 22px;
  top: 72px;
  left: 1643px;
  border-radius: 15px;
  position: absolute;
  background-color: #5678FF0D;
}
.ddl-text {
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  text-align: center;
  color: #1B2A52;
}
.demo {
  position: absolute;
  font-weight: bold;
  font-size: 50px;
  color: #cdcacae6;
  transform: rotate(-45deg);
  top: 40%;
  left: 38%;
  letter-spacing: 75px;
}

// .report-main {
//   width: 100%;
//   min-height: 1080px;
//   background-size: 100% 100%;
//   background-image: url("../assets/icon/score.png");
//   position: relative;
// }
// @media screen and (width < 1920px) {
//   .report-main {
//     width: 1920px;
//     min-height: 1080px;
//     // overflow: scroll;
//   }
// }

</style>